<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        .layui-card-body ul {
            list-style: none;
        }

        .layui-card-body ul li {
            float: left;
            padding: 5px;
        }

        .layui-card-body ul li:hover {
            background-color: #f0f0f0;
        }

        .layui-card-body ul li table {
            width: 150px;
        }

        .layui-card-body ul li table i {
            font-size: 36px;
            color: #1aa094
        }

        .layui-card-body ul li table .number {
            font-size: 24px;
            color: red
        }

        .layui-card-body ul li table .txt {
            color: #888888;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15" style="margin-top: 10px;">
        <div class="layui-col-md12">
            <div class="layui-card" style="height: 125px">
                <div class="layui-card-header">系统概览</div>
                <div class="layui-card-body">
                    <ul>
                        <li>
                            <table>
                                <tr>
                                    <td rowspan="2" align="center">
                                        <i class="layui-icon layui-icon-group"></i>
                                    </td>
                                    <td class="number" id="order">8</td>
                                </tr>
                                <tr>
                                    <td class="txt">车主数量</td>
                                </tr>
                            </table>
                        </li>
                            <li>
                                <table>
                                    <tr>
                                        <td rowspan="2" align="center">
                                            <i class="layui-icon layui-icon-form"></i>
                                        </td>
                                        <td class="number" id="customer">5</td>
                                    </tr>
                                    <tr>
                                        <td class="txt">会员卡数量</td>
                                    </tr>
                                </table>
                            </li>
                            <li>
                                <table>
                                    <tr>
                                        <td rowspan="2" align="center">
                                            <i class="layui-icon layui-icon-carousel"></i>
                                        </td>
                                        <td class="number" id="vip">5</td>
                                    </tr>
                                    <tr>
                                        <td class="txt">车位数量</td>
                                    </tr>
                                </table>
                            </li>
                            <li>
                                <table>
                                    <tr>
                                        <td rowspan="2" align="center">
                                            <i class="layui-icon layui-icon-file"></i>
                                        </td>
                                        <td class="number" id="car">5</td>
                                    </tr>
                                    <tr>
                                        <td class="txt">订单数量</td>
                                    </tr>
                                </table>
                            </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
<script>
    /*引用js下的echarts*/
    layui.use(['echarts'], function () {
        var echarts = layui.echarts,$ = layui.jquery;
        $.ajax({
            url:"${basePath}sum",
            type:"POST",
            dataType:'json',
            success:function(data){
                $('#customer').html(data.data.customerCnt);
                $('#vip').html(data.data.vipCnt);
                $('#car').html(data.data.carCnt);
                $('#order').html(data.data.orderCnt);
            }
        });



    });
</script>
</body>
</html>
